import React,{useEffect, useState} from 'react'
import {connect} from 'react-redux'
import { InputItem, Toast } from 'antd-mobile'
import axios from 'axios'

import Navbar from '../../components/Navbar'
import { setUserData } from '../../redux/actions'

import {reqUserLogin,reqUserData} from '../../api'
import {  } from '../../utils'

import './index.scss'

export default connect(state=>({user:state.user}),{setUserData})(function Login(props) {
  const {history,location,setUserData}=props

  const [submitData,setSubmitData]=useState({username:{data:'',isPass:false,error:''},password:{data:'',isPass:false,error:''},goLogin:false})

  const login=()=>{
    const {username,password}=submitData
    if(username.data===''||password.data===''){ //空值监测
      Toast.show('不能为空',2,null,false)
      return
    }
    if(!username.isPass||!password.isPass){ //长度监测
      Toast.show(!username.isPass?username.error:password.error,2,null,false)
      return
    }
    setSubmitData({username,password,goLogin:true})
  }

  useEffect(()=>{
    async function login(params){
      let res_login=await reqUserLogin(params)
      if(res_login.status!==200){
        Toast.fail(res_login.description,2,null,false)
        setSubmitData({...submitData,goLogin:false})
        return
      }
      axios.defaults.headers.common['Authorization']=res_login.body.token //设置请求头Authorization为token
      let res_data=await reqUserData()
      let data=res_data.body
      data.token=res_login.body.token
      setUserData(data)
      if(res_login.status===200&&res_data.status===200)Toast.success(res_login.description,2,null,false)
      setSubmitData({...submitData,goLogin:false})
      location.state!==undefined?history.replace('/detail',{id:location.state.id}):history.go(-1)//history.push('/home')
    }
    if(submitData.goLogin)login({username:submitData.username.data,password:submitData.password.data})
  },[submitData,setUserData,history,location])

  return (
    <div>
      <div className='login-navbar'>
        <Navbar title='账号登录'></Navbar>
      </div>
      <div className='login-content'>
        <InputItem
          clear
          name='username'
          placeholder="请输入账号"
          onChange={val=>setSubmitData({...submitData,username:{data:val,isPass:val.length>=4&&val.length<=20,error:'必须由4-20个有效字符组成'}})}
          error={!submitData.username.isPass}
          onErrorClick={()=>Toast.show(submitData.username.error,2,null,false)}
        >账号:</InputItem>
        <InputItem
          clear
          type='password'
          name='password'
          placeholder="请输入密码"
          onChange={val=>setSubmitData({...submitData,password:{data:val,isPass:val.length>=5&&val.length<=20,error:'必须由5-20个有效字符组成'}})}
          error={!submitData.password.isPass}
          onErrorClick={()=>Toast.show(submitData.password.error,2,null,false)}
        >密码:</InputItem>
      </div>
      <div className='login-btn'><div className='btn' onClick={login}>登录</div></div>
      <div className='register'><span onClick={()=>history.push('/register')}>还没有账号，去注册~~</span></div>
    </div>
  )
})
